// 领料申请
<template>
  <div class="Application">
    <div style="padding: 15px; background: #f8f8f8">
      <BreadcrumbLayer></BreadcrumbLayer>
    </div>
    <el-row class="table">
      <el-row class="select">
        <el-form :inline="true" :model="formInline" ref="resetFormData" class="demo-form-inline">
          <el-form-item label="申请编号" prop="id">
            <el-input style="width: 150px" v-model="formInline.id" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="申请人员" prop="user">
            <el-input style="width: 150px" v-model="formInline.user" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="所属部门" prop="department">
            <el-select style="width: 150px" v-model="formInline.department" placeholder="请选择">
              <el-option label="技术部" value="技术部" />
            </el-select>
          </el-form-item>
          <el-form-item label="领料状态" prop="pickingStatus">
            <el-select style="width: 150px" v-model="formInline.pickingStatus" placeholder="请选择">
              <el-option label="未归还" value="未归还" />
              <el-option label="已归还" value="已归还" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择日期" prop="date">
            <el-date-picker
              v-model="formInline.date"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="资产名称" prop="assets">
            <el-input style="width: 150px" v-model="formInline.assets" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button color="#33b686" style="color: white" :icon="Search" type="primary" @click="onSubmit"
              >查询</el-button
            >
            <el-button type="reset" :icon="Refresh" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <h3>查询结果列表</h3>
      </el-row>
      <el-row class="btn"
        ><el-button color="#33b686" style="color: white" type="primary" @click="dialogVisible1 = true">新增</el-button>
        <el-button color="#33b686" style="color: white">打印</el-button>
        <el-button color="#33b686" style="color: white">导出</el-button>
      </el-row>
      <el-row>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          :key="tableNum"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          header-align="center"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" type="index" label="序号" width="80" />
          <el-table-column align="center" property="id" label="申请编号" width="130" />
          <el-table-column align="center" property="department" label="申请部门" width="130" />
          <el-table-column align="center" property="user" label="申请人员" width="130" />
          <el-table-column align="center" property="date" label="领料时间" width="130" />
          <el-table-column align="center" property="count" label="资产数量" width="130" />
          <el-table-column align="center" property="status" label="状态" width="80" />
          <el-table-column align="center" label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="handleSee(scope.$index, scope.row)">查看</el-button>
              <el-button size="small" type="primary" @click="handleRegister(scope.$index, scope.row)"
                >发放登记</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-row>
    <!-- 新建模态框 -->
    <el-dialog v-model="dialogVisible1" title="新建" width="75%">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="申请编号">
          <el-input style="width: 150px" v-model="form.id" placeholder="请输入" disabled />
        </el-form-item>
        <el-form-item label="资产数量">
          <el-input style="width: 150px" v-model="form.count" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="领料时间">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="默认今天"
            style="width: 150px"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="领用人员">
          <el-input style="width: 150px" v-model="form.user" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="领料事由"
          ><el-input v-model="form.desc" type="textarea" :rows="5" :cols="50" placeholder="请输入" width="300px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button color="#33b686" style="color: white" type="primary" @click="add()">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 查看模态框 -->
    <el-dialog v-model="dialogVisible2" title="查看" width="75%">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="申请编号">
          <el-input style="width: 150px" v-model="form.id" placeholder="请输入" disabled />
        </el-form-item>
        <el-form-item label="领料时间">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="默认今天"
            style="width: 150px"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="领用人员">
          <el-input style="width: 150px" v-model="form.user" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="领料事由"
          ><el-input v-model="form.desc" type="textarea" :rows="5" :cols="50" placeholder="请输入" width="300px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button color="#33b686" style="color: white" type="primary" @click="dialogVisible2 = true">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// import inStore from '../../store/in'
import BreadcrumbLayer from '../../components/box-components/BreadcrumbLayer.vue'
import { ref, reactive, computed } from 'vue'
import { ElTable, ElForm, ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
// const mainstore = defineStore('admin', {
//   state: () => {
//     return {}
//   },
//   getters: {},
//   actions: {}
// })
// const store = inStore()

interface Application {
  id: string
  name: string
  department: string
  pickingStatus: string
  count: number
  assets: string
  date: string
  status: string
}
const formInline = reactive({
  id: 'SQ',
  user: '哈南',
  department: '技术部',
  pickingStatus: '未归还',
  date: '2023-01-01',
  assets: ''
})
let tableData: Application[] = ref([
  {
    id: 'SQ2398130',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 98,
    assets: '',
    date: '2023-01-08',
    status: '待发放'
  },
  {
    id: 'SQ2398131',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 6,
    assets: '',
    date: '2023-01-01',
    status: '待发放'
  },
  {
    id: 'SQ2398132',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 64,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398133',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 10,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398134',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 300,
    assets: '',
    date: '2023-01-01',
    status: '待发放'
  },
  {
    id: 'SQ2398135',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 360,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398136',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 70,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398137',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 32,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  }
])

let form = reactive({
  id: '',
  date: '',
  user: '',
  department: '',
  desc: '',
  count: null
})
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<Application[]>([])
const resetFormData = ref(null)
let dialogVisible1 = ref(false)
let dialogVisible2 = ref(false)
let tableNum = 0
let cTableData = ref([
  {
    id: 'SQ2398130',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 98,
    assets: '',
    date: '2023-01-08',
    status: '待发放'
  },
  {
    id: 'SQ2398131',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 6,
    assets: '',
    date: '2023-01-01',
    status: '待发放'
  },
  {
    id: 'SQ2398132',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 64,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398133',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 10,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398134',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 300,
    assets: '',
    date: '2023-01-01',
    status: '待发放'
  },
  {
    id: 'SQ2398135',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 360,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398136',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 70,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  },
  {
    id: 'SQ2398137',
    user: '哈南',
    department: '技术部',
    pickingStatus: '未归还',
    count: 32,
    assets: '',
    date: '2023-01-01',
    status: '已发放'
  }
])
// 搜索
const onSubmit = () => {
  console.log('formInline!', formInline.id)
  console.log('formInline.id', formInline.id)
  console.log('formInline.user', formInline.user)
  console.log('formInline.department', formInline.department)
  console.log('formInline.date', formInline.date)
  console.log('formInline.pickingStatus', formInline.pickingStatus)
  getSearchTableData()
}
function getSearchTableData() {
  let searchTableData = ref(
    computed(() =>
      tableData.value.filter(item => {
        return (
          // 过滤全部数据
          item.id.includes(formInline.id) &&
          item.user.includes(formInline.user) &&
          item.department.includes(formInline.department) &&
          // item.assets.includes(formInline.assets.trim()) &&
          item.date.includes(formInline.date) &&
          item.pickingStatus.includes(formInline.pickingStatus)
        )
      })
    )
  )
  console.log(searchTableData.value)
  // tableData.value = []
  tableData.value = searchTableData.value
}
const getTableData = () => {
  tableData.value = []
  tableData.value = cTableData.value
  tableNum++
}

// 重置
const reset = () => {
  toggleSelection()
  resetLineForm()
  getTableData()
}
// 清空查询行内表单
/*
  需要在el-form上绑定一个ref
  需要在el-form-item上绑定一个props
*/
const resetLineForm = () => {
  resetFormData.value.resetFields()
}
// 取消多选
const toggleSelection = (rows?: Application[]) => {
  multipleTableRef.value!.clearSelection()
}
const handleSelectionChange = (val: Application[]) => {
  multipleSelection.value = val
  console.log('val:', val)
}
// 添加
const add = () => {
  form = {}
  // 定义对象，存储从文本框获取到的数据
  const addArray = {
    id: 'SQ' + String(parseInt(tableData.value[tableData.value.length - 1].id.slice(2)) + 1),
    date: form.date,
    pickingStatus: '未归还',
    assets: '',
    user: '哈南',
    department: '技术部',
    count: form.count,
    status: '待发放'
  }
  // push方法，添加一条数据到初始数据的数组中
  tableData.value.push(addArray)
  dialogVisible1.value = false
}
// 查看
const handleSee = (index: number, row: Application) => {
  console.log(index, row)
}
// 发放登记
const handleRegister = (index: number, row: Application) => {
  console.log(index, row)
  ElMessageBox.confirm('是否确定调拨物品已全部到位？', '发放登记', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      console.log(row.status)
      row.status === '已发放'

      console.log(row.status)
      ElMessage({
        type: 'success',
        message: '已发放'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '待发放'
      })
    })
}
</script>

<style scoped lang="scss">
.Application {
  box-sizing: border-box;
  background: #fff;

  .table {
    box-sizing: border-box;
    margin: 10px 20px;
    > .select {
      padding: 20px;
    }
    > .btn {
      display: flex;
      align-items: center;
      margin-left: 700px;
    }
  }
}
// 修改dialog的样式
::v-deep .el-dialog__header {
  background-color: #00a468;
  margin-right: 0px;
  .el-dialog__title,
  .el-dialog__headerbtn,
  .el-dialog__close {
    color: white;
  }
}
::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
